<template>
<div class="u-panel">
  <div v-if="dataList && dataList.length > 0" class="msg-div-box">
    <batch-opr :indeterminateFlag="isIndeterminate" :checkAll="checkAll" :readFlag="true" @batchDel="del" @batchRead="read" @handleAllCheck="handleAllCheck" />
    <el-checkbox-group v-model="selectIds" @change="handleCheckedChange">
      <el-checkbox :label="item.id" :key="item.id" class="msg-check-box" v-for="(item) in dataList">
        <div class="msg-box" @click="read(item)">
          <div class="status-box">
            <el-tag :type="getTagType(item.status)">
              {{ dims.MSG_STATUS[item.status] }}
            </el-tag>
          </div>
          <div class="msg-text">
            <span>{{ item.msgText }}</span>
          </div>
        </div>
        <div class="del-box">
          <span class="create-time">
            {{ item.createTime }}
          </span>
        </div>
      </el-checkbox>
    </el-checkbox-group>
  </div>
  <div class="msg-div-box" v-else>
    <div class="c-no-data">
      暂无消息
    </div>
  </div>
</div>
</template>

<script>
import sa from '@/sa-frame/sa';
import batchOpr from '@/components/batch-opr'
export default {
  name: 'u-message',
  data() {
    return {
      dims: sa.$sys.getCurd(),
      dataList: [],
      selectIds: [],
      checkAll: false,
      isIndeterminate: false
    }
  },
  components: {
    batchOpr
  },
  created: function () {
    this.f5()
  },
  methods: {
    // 我的评论
    f5() {
      sa.ajax('/my/msg', function (res) {
        this.dataList = res.data;
        this.isIndeterminate = false
      }.bind(this), {
        type: 'get'
      });
    },
    // 获取标签样式
    getTagType(status) {
      if (status === 0) {
        return 'info'
      } else {
        return 'success'
      }
    },
    // 删除
    del() {
      // 批量删
      if (!this.selectIds | this.selectIds.length <= 0) {
        sa.msg("请至少选择一条数据!")
        return
      }
      sa.confirm('是否删除，此操作不可撤销', function () {
        sa.ajax("/my/msg-del", {
          ids: this.selectIds
        }, function (_res) {
          this.f5();
        }.bind(this), {
          type: 'post'
        })
      }.bind(this));
    },
    // 消息未读时，点击读消息
    read(item) {
      let ids = []
      if (item) {
        // 单个删除
        let label = this.dims.MSG_TYPE[item.type]
        let data = {
          id: item.id,
          note: item.msgText,
          createTime: item.createTime,
          // 状态字典code        
          statusCode: 'MSG_STATUS',
          status: item.status
        }
        sa.showModel(label, () => import('./detail/index'), data);
        if (item.status === 0) {
          ids.push(item.id)
        }
      } else {
        // 所有未读数据
        let noReadAll = this.dataList.filter(item => item.status === 0).map(item => item.id)
        // 提取选中的未读数据
        ids = noReadAll.filter(item => this.selectIds.includes(item))
        if (!ids | ids.length <= 0) {
          sa.msg("请至少选择一条未读数据!")
        }
      }
      if (ids.length > 0) {
        sa.ajax('/my/msg-read', {
          ids: ids
        }, function (res) {
          if (res.code === 200) {
            this.f5()
          }
        }.bind(this), {
          type: 'post'
        })
      }
    },
    // 全选
    handleAllCheck() {
      if (this.checkAll) {
        this.selectIds = []
      } else {
        this.dataList.forEach(item => {
          this.selectIds.push(item.id)
        })
      }
      this.checkAll = !this.checkAll
      this.isIndeterminate = this.checkall;
    },
    handleCheckedChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.dataList.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.dataList.length;
    }
  },
}
</script>

<style scoped>
img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 5px;
}

.u-panel {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  height: 100%;
}

.msg-div-box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  width: 100%;
  border-radius: 5px;
  overflow: auto;
}

.msg-check-box {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    transition: all 0.5s;
    box-shadow: 0px 0px 2px 1px #f1f1f1;
    transform: translate(0%, 2%);
  }
}

::v-deep .el-checkbox__input {
  display: flex;
  align-items: center;
  padding-left: 5px;
}

::v-deep .el-checkbox__label {
  display: flex;
  width: 100%;
  padding-left: 5px;
}

.msg-box {
  display: flex;
  width: 80%;
}

.status-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10%;
}

.msg-text {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 95%;
  margin: 5px 0px;
  height: 36px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #aaaaaa;
}

.del-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20%;

  .create-time {
    margin-right: 10px;
    color: #aaaaaa;
  }

  .del-btn {
    color: red;
  }
}

.c-no-data {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  text-align: center;
  color: #aaaaaa;
}
</style>
